<template>
	<view class="salesperson">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar :title="title" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="coreshop-padding-20">
			<u--form :model="form" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
				<u-form-item label="名称" prop="name" borderBottom clearValidate>
					<u--input v-model="form.name" placeholder="请填写名称" clearable />
				</u-form-item>
				<u-form-item label="手机号" prop="mobile" borderBottom clearValidate>
					<u--input type="number" v-model="form.mobile" placeholder="请填写手机号" clearable />
				</u-form-item>
				<u-form-item borderBottom clearValidate>
					<u--textarea v-model="form.remark" placeholder="请填写备注(最多500字)" autoHeight maxlength="500" count
						clearable></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
			<u-button text="保存" @click="saveOperation" :disabled='submitStatus' :loading='submitStatus'></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '添加信息',
				form: {
					name: '',
					mobile: null,
					remark: '',
					id: 0
				},
				submitStatus: false,
				show: false,
				rules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur',
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		onShow() {},
		//加载执行
		onLoad: function(options) {
			let store = options.store;
			if (store == null) return;

			let model = JSON.parse(store);
			if (model.id !== undefined) {
				this.title = "修改信息";
				this.form.name = model.name;
				this.form.id = model.id;
				this.form.mobile = model.mobile;
				this.form.remark = model.remark;
			}
		},
		methods: {
			//保存
			saveOperation() {
				this.$refs.uForm.validate().then(res => {
					this.submitStatus = false;
					if (!this.form.name) {
						this.$u.toast('请输入名称')
						return false
					} else if (!this.form.mobile || isNaN(this.form.mobile)) {
						this.$u.toast('请输入手机号')
						return false
					} else if (!this.$u.test.mobile(this.form.mobile)) {
						this.$u.toast('手机号格式不正确');
						return false
					}

					if (this.form.id == 0) {
						this.doAddAgentByDealer();
					} else {
						this.doEditAgentByDealer();
					}
				});
			},
			doAddAgentByDealer() {
				this.$u.api.doAddAgentByDealer(this.form).then(res => {
					this.submitStatus = false;
					if (res.status) {
						this.$refs.uToast.show({
							message: res.msg,
							type: 'success',
							complete: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			doEditAgentByDealer() {
				this.$u.api.doEditAgentByDealer(this.form).then(res => {
					this.submitStatus = false;
					if (res.status) {
						this.$refs.uToast.show({
							message: res.msg,
							type: 'success',
							complete: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					} else {
						this.$u.toast(res.msg);
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.salesperson {
		/deep/ .u-input {
			border: none !important;
		}

		/deep/ .u-input {
			input {
				text-align: right !important;
			}
		}

		/deep/ .u-textarea {
			border: none !important;
		}

		/deep/ .u-button {
			background-color: #D0241C;
			border-radius: 26rpx;
			color: #fff;
			height: 70rpx;
		}

		/deep/.u-form-item__body__left__content__label {
			font-size: 31rpx !important;
		}
	}
</style>